<template>
	<view style="overflow: hidden;width: 100vw;">
		<cu-custom class="" bgColor="bgmains" :isBack="true">
			<view slot="content">分享海报</view>
		</cu-custom>

		<!-- <image class="code" src="https://www.xiaoaojianghu.top/wxmp/mp4.png"></image> -->
		<!-- :style="{'width':windowWidth+'px','height':windowHeight+'px'}" -->
		<canvas style="width: 414px; height: 736px;" canvas-id="firstCanvas" id="firstCanvas"
			class="firse_cavas"></canvas>
		<image style="width: 100%;position: absolute;" mode="widthFix" class="" :src="poster">
		</image>
		<view class="notice" @click="saveCanvas" v-if="code && poster">点此保存图片</view>
	</view>
</template>

<script>
var app = getApp()
export default {
	data() {
		return {
			windowWidth: 0,
			windowHeight: 0,
			poster: '',
			code: '',
			bg_color: '',
			bg_poster: ""
		}
	},
	onLoad() {

		this.getUser()
	},
	onShow() {
		// this.drawCanvas()
	},
	methods: {
		getUser() {
			var t = this;
			app.globalData.util.request({
				url: 'WechatUser/view',
				data: {},
				success(res) {
					t.code = res.data.data.code
					console.log(res.data)
					t.drawCanvas()
				}
			}, true)
		},
		getSys() {
			var t = this
			uni.getSystemInfo({
				success(res) {
					console.log(res)
					t.windowWidth = res.windowWidth
					t.windowHeight = res.windowHeight
				}
			})
		},
		async drawCanvas() {
			var _this = this;
			uni.showLoading({
				title: '加载中'
			})
			// await _this.getSys()
			_this.showCanvas = true;
			_this.context = uni.createCanvasContext('firstCanvas', _this)
      console.log("图3333片", _this.context )
			this.bg_poster = uni.getStorageSync('sys').bg_poster || 'https://www.xiaoaojianghu.top/wximage/dis/poster-bg.jpg'
      console.log("图222片", this.bg_poster )
			var img = await _this.handleNetworkImgaeTransferTempImage(
				this.bg_poster)
      console.log("图1111片", img )
			var code = await _this.handleNetworkImgaeTransferTempImage(_this.code)
			console.log("图111片", _this.code)
			if (this.bg_poster) {
				_this.context.drawImage(img, 0, 0, 414, 736) //背景

			}
			_this.context.drawImage(code, 107, 435, 200, 200) //头像转换的jpg
			// _this.context.setFontSize(14)
			// _this.context.setFillStyle("#ff7c00")
			// _this.context.fillText('“不忘初心、牢记使命”', 120, 360)//文字
			_this.context.draw(true); //绘制
			setTimeout(function () {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function (res) {
						setTimeout(function () {
							uni.hideLoading()
						}, 1000)
						_this.bg_color = '#FF2F25'
						_this.poster = res.tempFilePath
						// console.log("保存的图片", res.tempFilePath)
					}
				})
			}, 1000)
		},
		saveCanvas() { //保存图片到本地
			let _this = this;
			uni.canvasToTempFilePath({ // 保存canvas为图片
				canvasId: 'firstCanvas',
				quality: 1,
				complete: function (res) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							console.log('save success');
							uni.showToast({
								title: '图片保存成功'
							})
							setTimeout(() => {
								_this.showCanvas = false;
							}, 1000);
						},
						fail() {
							setTimeout(() => {
								_this.showCanvas = false;
							}, 1000);
						}
					});
				},
			})

		},
		handleNetworkImgaeTransferTempImage(url) {
			return new Promise(resolve => {
				 console.log("indexOf===>" + url.indexOf('https'))
				if (url.indexOf('https') === 0) {
					uni.downloadFile({
						url,
						success: res => {
							resolve(res.tempFilePath);
						}
					});
				} else {
					resolve(url);
				}
			});
		},
	}
}
</script>

<style lang="scss">
page {
	// background-color: #F7F5F6;
	// background-image: url('https://www.xiaoaojianghu.top/wximage/dis/poster-bg.jpg');
	width: 100%;
	height: 100%;
	// background-color: #FF2F25;
	// background-size: 100% 100%;
}

.bgmains {
	color: black !important;
	position: absolute;
}

.code {
	width: 330rpx;
	height: 350rpx;
	position: fixed;
	bottom: 190rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.notice {
	position: fixed;
	bottom: 150rpx;
	background-color: white;
	padding: 30rpx 0;
	text-align: center;
	border-radius: 50rpx;
	left: 10%;
	right: 10%;
	margin: 0 auto;
	font-size: 30rpx;
}

.firse_cavas {
	position: fixed;
	top: 200%;
	left: 200%;
}
</style>
